<template>
 <div>
  <el-table
      :data="Category1List"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column align="center" prop="id" label="分类ID" />
      <el-table-column prop="name" label="分类名称" />
      <el-table-column  label="Address" align="center" width="600px">
        <template #header>
          <el-input placeholder="按enter键添加一级分类"></el-input>
        </template>
        <el-button :icon="Plus" type="primary" size="small"></el-button>
        <el-button :icon="Edit" type="warning" size="small"></el-button>
        <el-button :icon="Delete" type="danger" size="small"></el-button>
      </el-table-column>
    </el-table>
 </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Category'
});
</script>

<script lang="ts" setup>
import {ref,onMounted} from 'vue'
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { reqGetCategory1List, reqGetCategory2List,reqGetCategory3List } from '@/api/product/categorySelector';
import type { CategoryListModel, CategoryModel } from '@/api/product/interface/categoryModel';
const Category1List =ref<CategoryListModel>()

onMounted(async()=>{
    
    const result = await reqGetCategory1List()
      console.log(result)
      Category1List.value = result
      Category1List.value.forEach(item=>{
        item.hasChildren = true
        item.level = 1//level属性用来区分是几级分类
      })
    
})

interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}


const load = async(
  row: CategoryModel,
  treeNode: unknown,
  resolve: (date: CategoryModel[]) => void
) => {
  // setTimeout(() => {

  //   resolve([
  //     {
  //       id: 31,
  //       date: '2016-05-01',
  //       name: 'wangxiaohu',
  //       address: 'No. 189, Grove St, Los Angeles',
  //     },
  //     {
  //       id: 32,
  //       date: '2016-05-01',
  //       name: 'wangxiaohu',
  //       address: 'No. 189, Grove St, Los Angeles',
  //     },
  //   ])
  // }, 1000)
    if(row.level === 1){
      let Category2List = []
      const result = await reqGetCategory2List(row.id)
      // console.log(result,'222')
      Category2List = result
      // console.log(Category2List,'3333')
      Category2List.forEach(item => {
        item.hasChildren = true
        item.level = 2
      });
      resolve(Category2List)
    }else if (row.level===2){
      let Category3List = []
      const result = await reqGetCategory3List(row.id)
      Category3List=result
      Category3List.forEach(item=>{
        item.hasChildren = false //这个是控制有没有子集分类的 true的话就有三角形 可以打开子集分类
        item.level = 3
      })
      resolve(Category3List)
    }
}


// const tableData1: User[] = [
//   {
//     id: 1,
//     date: '2016-05-02',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: 2,
//     date: '2016-05-04',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: 3,
//     date: '2016-05-01',
//     name: 'wangxiaohu',
//     hasChildren: true,
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     id: 4,
//     date: '2016-05-03',
//     name: 'wangxiaohu',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]
</script>

<style scoped>
</style>